<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>注册</title>
    <link rel="stylesheet" href="/Home/frame/layui/css/layui.css">
    <link rel="stylesheet" href="/Home/frame/static/css/style.css">
    <link rel="icon" href="/Home/frame/static/image/code.png">
</head>
<body>

<div class="login-main">
    <header class="layui-elip">{{$message or "注册"}}</header>
    <form class="layui-form" action="/dohomeregister" method="post" enctype="multipart/form-data">
        <div class="layui-input-inline">
            <input type="text" name="nickname" required  lay-verify="required" placeholder="昵称" autocomplete="off" class="layui-input">
        </div>
         <div class="layui-input-inline">
            <input type="text" name="username" required  lay-verify="required" placeholder="账号" autocomplete="off" class="layui-input">
        </div>
        <div class="layui-input-inline">
            <input type="password" name="password" required  lay-verify="required" placeholder="密码" autocomplete="off" class="layui-input">
        </div>
        <div class="layui-input-inline">
            <input type="password" name="repassword" required  lay-verify="required" placeholder="确认密码" autocomplete="off" class="layui-input">
        </div>{{csrf_field()}}
        <div class="layui-input-inline login-btn">
            <button type="submit" class="layui-btn">注册</button>
        </div>
        <hr/>
        <p><a href="/homelogin" class="fl">已有账号？立即登录</a><!-- <a href="javascript:;" class="fr">忘记密码？</a> --></p>
    </form>
</div>


<script src="/Home/frame/layui/layui.js"></script>
<script type="text/javascript">
    layui.use(['form'], function () {
        var form    = layui.form
            ,$      = layui.jquery;
            //获取焦点事件
            $('input[name="nickname"]').focus(function(){
                    $(this).parent().find('.i').remove();
            });

            //为表单元素添加失去焦点事件
            $("form :input").blur(function(){
                var $parent = $(this).parent();
                $parent.find(".msg").remove(); //删除以前的提醒元素（find()：查找匹配元素集中元素的所有匹配元素）
                //验证昵称
                // if($(this).is("input[name='nickname']")){
                //     var nameVal = $.trim(this.value); //原生js去空格方式：this.replace(/(^\s*)|(\s*$)/g, "")
                //     var regName = /[~#^$@%&!*()<>:;'"{}【】  ]/;
                //     if(nameVal == "" || nameVal.length < 2 || regName.test(nameVal)){
                //         var errorMsg = " 昵称非空，长度2位以上，不包含特殊字符！";
                //         //class='msg onError' 中间的空格是层叠样式的格式
                //         $parent.append("<span class='msg onError'>" + errorMsg + "</span>");
                //     }
                //     else{
                //         var okMsg=" 输入正确";
                //         $parent.find(".msg").remove();
                //         $parent.append("<span class='msg onSuccess'>" + okMsg + "</span>");
                //     }
                // }
                //验证账号
                // if($(this).is("input[name='username']")){
                //     var userVal = $.trim(this.value);
                //     var regUser = /[~#^$@%&!*()<>:;'"{}【】  ]/;
                //     if(userVal== "" || (userVal != "" && !regUser.test(userVal) ||nameVal.length < 6 )){
                //         var errorMsg = " 账号非空，长度6位以上，不包含特殊字符！";
                //         $parent.append("<span class='msg onError'>" + errorMsg + "</span>");
                //     }
                //     else{
                //         var okMsg=" 输入正确";
                //         $parent.find(".msg").remove();
                //         $parent.append("<span class='msg onSuccess'>" + okMsg + "</span>");
                //     }
                // }
                // //校验密码
                // if($(this).is("input[name='repassword']")){
                //     var repasVal = $.trim(this.value);
                //     var pasVal   = $.trim($("input[name='password']").value);
                //     if(repasVal == "" || repasVal != pasVal){
                //         var errorMsg = "两次密码不一致"
                //         $parent.append("<span class='msg onError'>" + errorMsg + "</span>");
                //     }else{
                //         var okMsg=" 正确";
                //         $parent.find(".msg").remove();
                //         $parent.append("<span class='msg onSuccess'>" + okMsg + "</span>");
                //     }
                // }

                // if($(this).is("#email")){
                //     var emailVal = $.trim(this.value);
                //     var regEmail = /.+@.+\.[a-zA-Z]{2,4}$/;
                //     if(emailVal== "" || (emailVal != "" && !regEmail.test(emailVal))){
                //         var errorMsg = " 请输入正确的E-Mail住址！";
                //         $parent.append("<span class='msg onError'>" + errorMsg + "</span>");
                //     }
                //     else{
                //         var okMsg=" 输入正确";
                //         $parent.find(".high").remove();
                //         $parent.append("<span class='msg onSuccess'>" + okMsg + "</span>");
                //     }
                // }
            }).keyup(function(){
                //triggerHandler 防止事件执行完后，浏览器自动为标签获得焦点
                $(this).triggerHandler("blur"); 
            }).focus(function(){
                $(this).triggerHandler("blur");
            });
            
            //点击重置按钮时，通过trigger()来触发文本框的失去焦点事件
            $("#send").click(function(){
                //trigger 事件执行完后，浏览器会为submit按钮获得焦点
                $("form .required:input").trigger("blur"); 
                var numError = $("form .onError").length;
                if(numError){
                    return false;
                }
                alert("注册成功！");
            });

    });
</script>
</body>
</html>